/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,
    TouchableWithoutFeedback,
    Clipboard
} from 'react-native';

import Toast from 'react-native-simple-toast'

import NavBar from '../../components/NavBarView'
import State from '../../components/DemandStateView'
import {
    DefaultLabel,
    DefaultField,
    DefaultFieldType
} from '../../components/Form'
import DashLine from '../../components/DashLine'
import BottomPopup from '../../components/BottomPopupModal'
import Constants from '../../config/Constants'
import AssetService from '../../services/Asset'
import {AssetState} from '../../config/dict/AssetState'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this.state = {
            moreShow: false,
            form: {},
            urlShow: false,
            progressShow: false,
            id: '',
            backType: 'default',
            progress: []
        }
        if (this.props.navigation.state.params) {
            this.state.id = this.props.navigation.state.params.id;
            this.state.backType = this.props.navigation.state.params.type || 'default';
            this.state.form = this.props.navigation.state.params.item || {};
        } else {
            Toast.show('资产数据获取失败');
            setTimeout(()=>{
                this.props.navigation.goBack();
            },1000);
        }
    }

    componentWillMount() {
        _self.load();
    }

    componentDidMount() {

    }

    async load() {
        const params = {
            asset_id: _self.state.id
        };
        const {result, message, data} = await AssetService.detail({params});
        if (result) {
            const form = data.detail;
            const progress = data.progress;
            _self.setState({
                form, progress
            });
        } else {
            Toast.show(message);
        }
    }

    toggleMoreShow() {
        _self.setState({
            moreShow: true
        })
    }

    //复制url到剪贴板
    urlToClipboard(url) {
        Clipboard.setString(url);
        Toast.show('复制成功！');
    }

    skip(path, params) {
        _self.props.navigation.navigate(path, params);
    }

    backForAdd() {
        const key = _self.props.navigation.state.params.prevState.pop().key;
        _self.props.navigation.goBack(key)
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar
                    leftEvent={() => this.backForAdd()}
                    leftIcon={require('../../sources/icon_global_back.png')}
                    back={this.state.backType === 'default'}
                    host={this}
                    title={AssetState[this.state.form.audit_status]}/>
                <ScrollView style={styles.container}>
                    <State activeIndex={
                        this.state.form.audit_status === AssetService.AUDIT_STATE.PASSED ||
                        this.state.form.audit_status === AssetService.AUDIT_STATE.SUCCEED ||
                        this.state.form.audit_status === AssetService.AUDIT_STATE.REFUSED_SECOND ||
                        this.state.form.audit_status === AssetService.AUDIT_STATE.REFUSED_FIRST ?
                            2 : 1
                    } icons={[
                        require('../../sources/icon_demand_progress_1.png'),
                        require('../../sources/icon_demand_progress_2.png'),
                        require('../../sources/icon_demand_progress_3.png'),
                    ]}/>
                    {
                        this.state.form.audit_status === AssetService.AUDIT_STATE.EDIT ||
                        this.state.form.audit_status === AssetService.AUDIT_STATE.REJECT_SECOND ||
                        this.state.form.audit_status === AssetService.AUDIT_STATE.REJECT_FIRST ?
                            <TouchableWithoutFeedback onPress={() => this.setState({urlShow: true})}>
                                <View style={[styles.tips, {backgroundColor: layout.MAIN_COLOR}]}>
                                    <Text allowFontScaling={false} style={styles.tipText}>您还需要登录PC版（asset.maileke.com.cn），进入"个人中心 -
                                        我的资产"中完善资产信息。</Text>
                                </View>
                            </TouchableWithoutFeedback> :
                            <View/>
                    }
                    <View style={[base.columnCC, styles.cardBox]}>
                        <View style={[base.columnCC, styles.innerBox]}>
                            <DashLine dashWidth={layout.width(6)} style={styles.contentLine}/>
                            <View style={[styles.angle, styles.angleLeft, styles.angleBottom]}/>
                            <View style={[styles.angle, styles.angleRight, styles.angleBottom]}/>
                            <TouchableWithoutFeedback onPress={() => this.setState({progressShow: true})}>
                                <View style={[styles.contentBox]}>
                                    <View style={[base.rowCC, styles.stateBox]}>
                                        <Text allowFontScaling={false} style={[styles.state, {
                                            color: layout.MAIN_COLOR
                                        }]}>{AssetState[this.state.form.audit_status]}</Text>
                                        <Image style={[styles.stateIcon, {
                                            tintColor: layout.MAIN_COLOR
                                        }]} source={require('../../sources/icon_global_go.png')}
                                               resizeMode={'contain'}/>
                                    </View>
                                    <Text allowFontScaling={false} style={styles.title}>{this.state.form.asset_name}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                        <View style={[base.columnCC, styles.innerBox,
                            this.state.moreShow ? {} : styles.moreHiddenHeight
                        ]}>
                            <View style={[styles.angle, styles.angleLeft, styles.angleTop]}/>
                            <View style={[styles.angle, styles.angleRight, styles.angleTop]}/>
                            <View style={styles.contentBox}>
                                <DefaultField text="资产编号">
                                    <DefaultLabel inputValue={this.state.form.asset_number}/>
                                </DefaultField>
                                <DefaultField text="资产类型">
                                    <DefaultLabel inputValue={this.state.form.asset_type}/>
                                </DefaultField>
                                <DefaultField text="二级分类">
                                    <DefaultLabel inputValue={this.state.form.second_classify}/>
                                </DefaultField>
                                {
                                    this.state.form.main_rating ?
                                        <DefaultField text="主体评级">
                                            <DefaultLabel inputValue={this.state.form.main_rating || '暂无主体评级'}/>
                                        </DefaultField> :
                                        <View/>
                                }
                                <DefaultField text="用款金额">
                                    <DefaultLabel suffix="元"
                                                  inputValue={format.money(this.state.form.capital_amount)}/>
                                </DefaultField>
                                <DefaultField text="用款期限">
                                    <DefaultLabel suffix="月" inputValue={this.state.form.capital_term}/>
                                </DefaultField>
                                <DefaultField text="融资利率">
                                    <DefaultLabel suffix="%"
                                                  inputValue={format.money(this.state.form.asset_rate)}/>
                                </DefaultField>
                                {
                                    this.state.form.asset_grade !== '暂无资产评级' ?
                                        <DefaultField text="资产评级">
                                            <DefaultLabel inputValue={this.state.form.asset_grade || '暂无资产评级'}/>
                                        </DefaultField> :
                                        <View/>
                                }
                                <DefaultField last={!this.state.form.asset_describe} type={DefaultFieldType.BLOCK} text="还款来源">
                                    <DefaultLabel textStyle={styles.labelTextAlign}
                                                  inputValue={this.state.form.repayment_source}/>
                                </DefaultField>
                                {
                                    this.state.form.asset_describe ?
                                        <DefaultField last={true} type={DefaultFieldType.BLOCK} text="资产优势">
                                            <DefaultLabel textStyle={styles.labelTextAlign}
                                                          inputValue={this.state.form.asset_describe}/>
                                        </DefaultField>:
                                        <View/>
                                }
                            </View>
                            {
                                this.state.moreShow ?
                                    <View/> :
                                    <TouchableWithoutFeedback onPress={() => this.toggleMoreShow()}>
                                        <Image style={[base.rowCC, styles.moreImage]}
                                               source={require('../../sources/image_demand_more.png')}
                                               resizeMode={'cover'}>
                                            <Text allowFontScaling={false} style={styles.moreText}>展开全部</Text>
                                        </Image>
                                    </TouchableWithoutFeedback>
                            }
                        </View>
                    </View>
                    <View style={[base.columnCC, styles.customBox]}>
                        <Image style={styles.customIcon} source={require('../../sources/icon_demand_coffee.png')}
                               resizeMode={'contain'}/>
                        <Text allowFontScaling={false} style={styles.customText}>我们的客户经理会电话跟您取得联系，请保持手机畅通，您也可以直接致电客服热线咨询。</Text>
                    </View>
                </ScrollView>
                <BottomPopup
                    visible={this.state.urlShow}
                    title="复制网址"
                    btnText="关闭"
                    btnOnPress={() => this.setState({urlShow: false})}>
                    <TouchableWithoutFeedback onPress={() => this.urlToClipboard(Constants.APP_PC_WEBSITE)}>
                        <View style={styles.urlBox}>
                            <Text allowFontScaling={false} style={styles.urlText}>{Constants.APP_PC_WEBSITE}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </BottomPopup>
                <BottomPopup
                    title="审核进度"
                    visible={this.state.progressShow}
                    btnText="关闭"
                    btnOnPress={() => this.setState({progressShow: false})}>
                    <View style={styles.progressBox}>
                        <ScrollView>
                            {
                                this.state.progress.map((item, index) => {
                                    const after = index > this.state.progress.findIndex(value => value.active);
                                    return (
                                        <View key={index} style={[base.rowCC, styles.progressItem]}>
                                            {
                                                this.state.progress.length > 0 && this.state.progress.length - 1 === index ?
                                                    <View/> :
                                                    <View style={[styles.progressLine, {
                                                        backgroundColor: after ? layout.FORM_AUX_FONT_COLOR : layout.MAIN_COLOR
                                                    }]}/>
                                            }
                                            {
                                                item.active ?
                                                    <View style={[base.columnCC, styles.progressPointBox]}><View
                                                        style={styles.progressPoint}/></View> :
                                                    <View style={[styles.progressPointOnly, {
                                                        backgroundColor: after ? layout.FORM_AUX_FONT_COLOR : layout.MAIN_COLOR
                                                    }]}/>
                                            }
                                            <View style={[base.columnCC, styles.progressInner]}>
                                                <View style={[base.rowCC, styles.progressTitleBox]}>
                                                    <Text allowFontScaling={false} style={[styles.progressTitle, {
                                                        color: item.active ? layout.MAIN_COLOR : after ? layout.FORM_AUX_FONT_COLOR : layout.FORM_FONT_COLOR
                                                    }]}>{item.title}</Text>
                                                    <Text allowFontScaling={false} style={styles.progressDate}>{item.date}</Text>
                                                </View>
                                                <View style={styles.progressContentBox}>
                                                    {
                                                        item.type === 'error' && item.description ?
                                                            <View style={[base.rowCC, styles.progressContentRow]}>
                                                                <Image style={styles.progressContentIcon}
                                                                       source={require('../../sources/icon_demand_warning.png')}
                                                                       resizeMode={'contain'}/>
                                                                <Text allowFontScaling={false} style={[styles.progressContent, {
                                                                    color: '#f56c6c'
                                                                }]}>{item.description}</Text>
                                                            </View>
                                                            :
                                                            <Text
                                                                style={styles.progressContent}>{item.description}</Text>
                                                    }
                                                </View>
                                            </View>
                                        </View>
                                    )
                                })
                            }
                        </ScrollView>
                    </View>
                </BottomPopup>
            </View>
        )
    }
}

const progressStyles = {
    progressBox: {
        alignSelf: 'stretch',
        height: layout.height(900),
        paddingTop: layout.GAP_VERTICAL_LARGE * 2
    },
    progressItem: {
        position: 'relative',
        paddingHorizontal: layout.width(60)
    },
    progressPointBox: {
        position: 'absolute',
        left: layout.width(42),
        top: layout.height(0),
        width: layout.width(36),
        height: layout.height(36),
        borderWidth: layout.LINE_WIDTH,
        borderColor: layout.MAIN_COLOR,
        borderRadius: layout.width(18),
        backgroundColor: '#fff'
    },
    progressPoint: {
        width: layout.width(20),
        height: layout.height(20),
        borderRadius: layout.width(10),
        backgroundColor: layout.MAIN_COLOR
    },
    progressPointOnly: {
        position: 'absolute',
        left: layout.width(42),
        top: layout.height(0),
        margin: layout.width(8),
        width: layout.width(20),
        height: layout.height(20),
        borderRadius: layout.width(10),
        backgroundColor: layout.MAIN_COLOR
    },
    progressLine: {
        alignSelf: 'stretch',
        width: layout.LINE_WIDTH,
        backgroundColor: layout.MAIN_COLOR,
        transform: [
            {
                translateY: layout.height(12)
            }
        ]
    },
    progressInner: {
        flex: 1,
        paddingLeft: layout.width(52),
        paddingBottom: layout.GAP_VERTICAL_LARGE
    },
    progressTitleBox: {},
    progressTitle: {
        flex: 1,
        fontSize: layout.font(28),
        color: layout.MAIN_AUX_COLOR
    },
    progressDate: {
        fontSize: layout.font(28),
        color: layout.FORM_AUX_FONT_COLOR
    },
    progressContentBox: {
        alignSelf: 'stretch',
        paddingVertical: layout.GAP_VERTICAL_MID
    },
    progressContentRow: {
        justifyContent: 'flex-start'
    },
    progressContentIcon: {
        marginRight: layout.width(8),
        width: layout.width(24),
        height: layout.height(24),
    },
    progressContent: {
        fontSize: layout.font(28),
        color: layout.FORM_AUX_FONT_COLOR
    }
}

const styles = StyleSheet.create({
    ...progressStyles,
    container: {
        flex: 1,
        backgroundColor: layout.MAIN_BACKGROUND_COLOR
    },
    tips: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE * 2,
        paddingVertical: layout.GAP_VERTICAL_LARGE
    },
    tipText: {
        fontSize: layout.font(24),
        color: '#fff',
        lineHeight: layout.heightToFixed(40)
    },
    cardBox: {
        marginHorizontal: layout.GAP_HORIZONTAL_MID,
        marginVertical: layout.GAP_VERTICAL_MID,
        backgroundColor: '#fff'
    },
    innerBox: {
        justifyContent: 'flex-start',
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        overflow: 'hidden'
    },
    moreHiddenHeight: {
        height: layout.height(400)
    },
    moreImage: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: layout.MAX_WIDTH - layout.GAP_HORIZONTAL_MID * 2,
        height: layout.height(148),
    },
    moreText: {
        fontSize: layout.font(28),
        color: layout.MAIN_AUX_COLOR
    },
    angle: {
        position: 'absolute',
        width: layout.width(32),
        height: layout.height(32),
        borderRadius: layout.width(16),
        backgroundColor: layout.MAIN_BACKGROUND_COLOR
    },
    angleLeft: {
        left: -layout.width(16),
    },
    angleBottom: {
        bottom: -layout.height(16),
    },
    angleRight: {
        right: -layout.width(16),
    },
    angleTop: {
        top: -layout.height(16),
    },
    contentBox: {
        alignSelf: 'stretch',
        paddingTop: layout.GAP_VERTICAL_MID
    },
    contentLine: {
        position: 'absolute',
        bottom: 0,
        width: layout.MAX_WIDTH - (layout.GAP_HORIZONTAL_LARGE + layout.GAP_HORIZONTAL_MID) * 2,
        height: layout.LINE_WIDTH * 2,
    },
    stateBox: {
        paddingTop: layout.GAP_VERTICAL_LARGE,
        paddingBottom: layout.GAP_VERTICAL_MID
    },
    state: {
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        fontSize: layout.font(30),
    },
    stateIcon: {
        width: layout.width(28),
        height: layout.height(28)
    },
    title: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingBottom: layout.GAP_VERTICAL_LARGE,
        fontSize: layout.font(30),
        lineHeight: layout.heightToFixed(40),
        color: layout.MAIN_AUX_COLOR,
        textAlign: 'center'
    },
    labelTextAlign: {
        textAlign: 'left'
    },
    customBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE * 2,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
    },
    customIcon: {
        width: layout.width(100),
        height: layout.height(100),
    },
    customText: {
        paddingVertical: layout.GAP_VERTICAL_MID,
        color: layout.FORM_FONT_COLOR,
        fontSize: layout.font(24),
        lineHeight: layout.heightToFixed(36),
        textAlign: 'center'
    },
    btnBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_SMALL,
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        backgroundColor: '#fff'
    },
    btnTip: {
        paddingBottom: layout.GAP_VERTICAL_SMALL,
        color: layout.MAIN_COLOR,
        fontSize: layout.font(26),
    },
    btn: {
        marginTop: 0,
        height: layout.height(90)
    },
    urlBox: {
        paddingVertical: layout.height(60)
    },
    urlText: {
        color: layout.MAIN_AUX_COLOR,
        fontSize: layout.font(30),
        textAlign: 'center'
    },
});

//路由
const AssetDetail = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AssetDetail',
    sign: true
};

export default AssetDetail;